<template>
  <el-row justify="space-between" class="row-margin-bottom">
    <!-- data_summary -->
    <el-card class="card" shadow="hover">
      <div class="statistic-container">
        <el-icon class="icon" size="32">
          <DataBoard />
        </el-icon>
        <el-statistic :value="dataSummary.totalRecords">
          <template #title>
            <div class="title-container">整体数据规模</div>
          </template>
        </el-statistic>
      </div>
    </el-card>
    <el-card class="card" shadow="hover">
      <div class="statistic-container">
        <el-icon class="icon" size="32">
          <User />
        </el-icon>
        <el-statistic :value="dataSummary.totalUsers">
          <template #title>
            <div class="title-container">总体用户数量</div>
          </template>
        </el-statistic>
      </div>
    </el-card>
    <el-card class="card" shadow="hover">
      <div class="statistic-container">
        <el-icon class="icon" size="32">
          <Goods />
        </el-icon>
        <el-statistic :value="dataSummary.totalItems">
          <template #title>
            <div class="title-container">总体商品数量</div>
          </template>
        </el-statistic>
      </div>
    </el-card>
    <el-card class="card" shadow="hover">
      <div class="statistic-container">
        <el-icon class="icon" size="32">
          <Folder />
        </el-icon>
        <el-statistic :value="dataSummary.totalCategories">
          <template #title>
            <div class="title-container">总体类别数量</div>
          </template>
        </el-statistic>
      </div>
    </el-card>
  </el-row>
</template>

<script lang="js" setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getDataSummary } from '@/api/index.js'
import { DataBoard, User, Goods, Folder } from '@element-plus/icons-vue'

const dataSummary = ref({
    totalRecords: 0,
    totalUsers: 0,
    totalItems: 0,
    totalCategories: 0
});

const router = useRouter();

onMounted(async () => {
    const data = await getDataSummary(router);
    if (data && data.length > 0) {
        dataSummary.value = data[0];
    }
});
</script>

<style scoped>
.el-col {
  text-align: center;
}

.card {
  cursor: default;
  border-radius: 8px;
  text-align: center;
  width: 24%;
}

.title-container {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
}

.icon {
  vertical-align: -0.125em;
}

.row-margin-bottom {
  margin-bottom: 20px;
}

.statistic-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 1rem;
}

.statistic-container:hover {
  .icon {
    color: #409eff;
    transition: color 0.15s ease-in-out;
  }
}
</style>
